<template>
  <div class="m-search">
    <GetFormItem :formData="searchFormData" ref="formRef">
      <template #buttonGroup>
        <div style="float: right; padding-right: 27px">
          <Button :style="{ marginRight: '12px' }" @click="onFormReset"
            >重置</Button
          >
          <Button type="primary" @click="onFormSearch">查询</Button>
          <Button
            v-if="searchFormData.length > 5"
            type="link"
            @click="toggle"
            :style="{ marginLeft: '12px' }"
            >{{ !expand ? "展开" : "收起"
            }}<AIcon :type="expand ? 'up' : 'down'"
          /></Button>
        </div>
      </template>
    </GetFormItem>
  </div>
</template>

<script>
import { Button, Icon } from "ant-design-vue";
import GetFormItem from "@/components/GetFormItem";
import { Layout } from "@/utils";

export default {
  name: "m-search",
  props: ["formData", "onReset", "onSearch"],
  components: { Button, GetFormItem, AIcon: Icon },
  data() {
    return {
      expand: false,
    };
  },
  computed: {
    searchFormData() {
      let data = this.formData;
      if (!this.expand) {
        data = this.formData.slice(0, 5);
      }
      return data.concat({
        layout: Layout.FORM_ITEM_LAYOUT_SEARCH_BUTTON,
        label: "",
        field: "",
        col: 8,
        component: "buttonGroup",
        class: "btn-group",
      });
    },
  },
  methods: {
    toggle() {
      this.expand = !this.expand;
    },
    onFormSearch() {
      this.$refs.formRef
        ?.validate()
        .then((value) => {
          if (this.onSearch) {
            this.onSearch(value);
          }
        })
        .catch((err) => {
          console.log("error", err);
        });
    },
    async onFormReset() {
      await this.$refs.formRef?.reset();
      if (this.onReset) {
        this.onReset();
      } else {
        this.onFormSearch();
      }
    },
  },
};
</script>

<style scoped lang="less"></style>
